<template>
  <Content style="width: 460px;height:290px;">
    <a-select v-model:value="site" style="width: 168px;position: absolute;top: 10px;left: 10px;z-index: 1000;" @change="handleChange" size="small">
      <a-select-option value="1">
        全平台订单总体趋势
      </a-select-option>
      <a-select-option value="2">
        独立站订单总体趋势
      </a-select-option>
      <a-select-option value="3">
        三方订单总体趋势
      </a-select-option>
      <a-select-option value="4">
        国际事业部订单总体趋势
      </a-select-option>
    </a-select>
    <div class="map" ref="echart"></div>
  </Content>
</template>
<script setup>
import Content from './component/content.vue'
import {ref, onMounted} from 'vue'
import * as echarts from "echarts"
import {ofsMonthOrderCnt} from "@/api/bigData/orderTrends.js";
import {removeLeadingZero} from "@utils/utils.js";
import dayjs from "dayjs";
let myWater
const echart = ref(null);
const list = ref([]);
const data = ref([]);
const monthList = ref([]);
const site = ref('1')
const handleChange = () => {
  switch (site.value){
    case '1':
      init()
      break;
    case '2':
      init("'magento2'","'N'","'N'")
      break;
    case '3':
      init("'N'","'amazonGB','walmartUS','amazonUS','wayfairUS','temuCN','amazonAU','tiktokUS','sheinEU','temuUS'","'Y'")
      break;
    case '4':
      init("'N'","'magento2CA','magento2EU','wayfairCA','amazonCA','amazonEU'","'Y'")
  }
}
const init = async (platform = "'N'", platform_site = "'N'", platform_site1 = "'N'") => {
  const res = await ofsMonthOrderCnt({
    platform:platform,
    platform_site:platform_site,
    platform_site1:platform_site1
  })
  list.value = res.result.records
  data.value = []
  monthList.value = []
  console.log(list.value)
  list.value = res.result.records.sort((a, b) => dayjs(a.month).valueOf() - dayjs(b.month).valueOf())
  list.value.forEach(item => {
    // item.month = removeLeadingZero(item.month)  + '月'
    monthList.value.push(item.month)
    data.value.push(item.order_cnt)
  })
  let option = {
    grid:{
      left: '6%',
      right: '6%',
      bottom: '3%',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      extraCssText: 'background: linear-gradient(to right, #032147, #0b3764, #032147)',
      textStyle: {
        color: "#fff"
      },
      borderColor: '#4c64b3',
    },
    xAxis: {
      type: 'category',
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      boundaryGap: false,
      data: monthList.value
    },
    yAxis: {
      type: 'value',
      axisLine:{
        lineStyle: {
          color: '#fff'
        }
      },
      splitLine:{
        show:true,
        lineStyle:{
          type:'dashed'
        },
      },
    },
    series: [
      {
        data: data.value,
        type: 'line',
        areaStyle: {
          normal: {
            color:'#0099ff'
          }
        },
        smooth: true,

      }
    ]
  }
  myWater.clear()
  //设置配置项
  myWater.setOption(option);
}
onMounted(async () => {
  myWater = echarts.init(echart.value);
  await init()
});
defineExpose({
  init
})
</script>

<style scoped>
body {
  color: white
}

.map {
  height: 100%;
  width: 100%;
}
:deep(.ant-select-selector) {
  background-color: #093563 !important;
  color: #fff !important;
}

:deep(.ant-select-arrow) {
  color: #fff !important;
}
</style>
